page {
	position: relative;
	&:after {
		content: '';
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-size: 100% 100%;
		z-index: -1;
	}
	margin: 0;
	padding: 0;
	font-family: PingFang SC, sans-serif;
	overflow-x: hidden;
	overflow-y: auto;
	line-height: 1;
	position: relative;
	/* #ifdef H5 */
	background-color: #F7F7F7;
	// padding-bottom: 24rpx;
	/* #endif */

	--red: rgb(229, 77, 66);
	--orange: rgb(243, 123, 29);
	--yellow: rgb(251, 189, 8);
	--olive: rgb(141, 198, 63);
	--green: rgb(57, 181, 74);
	--cyan: rgb(28, 187, 180);
	--blue: rgb(0, 129, 255);
	--purple: rgb(103, 57, 182);
	--mauve: rgb(156, 38, 176);
	--pink: rgb(224, 57, 151);
	--brown: rgb(165, 103, 63);
	--grey: rgb(135, 153, 163);
	--black: rgb(51, 51, 51);
	--darkGray: rgb(102, 102, 102);
	--gray: rgb(170, 170, 170);
	--ghostWhite: rgb(241, 241, 241);
	--white: rgb(255, 255, 255);
	--redLight: rgb(250, 219, 217);
	--orangeLight: rgb(253, 230, 210);
	--yellowLight: rgb(254, 242, 206);
	--oliveLight: rgb(232, 244, 217);
	--greenLight: rgb(215, 240, 219);
	--cyanLight: rgb(210, 241, 240);
	--blueLight: rgb(204, 230, 255);
	--purpleLight: rgb(225, 215, 240);
	--mauveLight: rgb(235, 212, 239);
	--pinkLight: rgb(249, 215, 234);
	--brownLight: rgb(237, 225, 217);
	--greyLight: rgb(231, 235, 237);
	--gradualRed: linear-gradient(45deg, rgb(244, 63, 59), rgb(236, 0, 140));
	--gradualOrange: linear-gradient(45deg, rgb(255, 151, 0), rgb(237, 28, 36));
	--gradualGreen: linear-gradient(45deg, rgb(57, 181, 74), rgb(141, 198, 63));
	--gradualPurple: linear-gradient(45deg, rgb(144, 0, 255), rgb(94, 0, 255));
	--gradualPink: linear-gradient(45deg, rgb(236, 0, 140), rgb(103, 57, 182));
	--gradualBlue: linear-gradient(45deg, rgb(0, 129, 255), rgb(28, 187, 180));
	--ShadowSize: 6rpx 6rpx 8rpx;
	--redShadow: rgba(204, 69, 59, 0.2);
	--orangeShadow: rgba(217, 109, 26, 0.2);
	--yellowShadow: rgba(224, 170, 7, 0.2);
	--oliveShadow: rgba(124, 173, 55, 0.2);
	--greenShadow: rgba(48, 156, 63, 0.2);
	--cyanShadow: rgba(28, 187, 180, 0.2);
	--blueShadow: rgba(0, 102, 204, 0.2);
	--purpleShadow: rgba(88, 48, 156, 0.2);
	--mauveShadow: rgba(133, 33, 150, 0.2);
	--pinkShadow: rgba(199, 50, 134, 0.2);
	--brownShadow: rgba(140, 88, 53, 0.2);
	--greyShadow: rgba(114, 130, 138, 0.2);
	--grayShadow: rgba(114, 130, 138, 0.2);
	--blackShadow: rgba(26, 26, 26, 0.2);
}

view,
text,
* {
	box-sizing: border-box !important;
}
image,
img {
	vertical-align: top;
}

/*-------------------背景色调----------------------*/
.bg-cyan {
	background-color: var(--cyan);
	color: var(--white);
}
.bg-blue {
	background-color: var(--blue);
	color: var(--white);
}
.bg-purple {
	background-color: var(--purple);
	color: var(--white);
}
.bg-mauve {
	background-color: var(--mauve);
	color: var(--white);
}
.bg-pink {
	background-color: var(--pink);
	color: var(--white);
}
.bg-brown {
	background-color: var(--brown);
	color: var(--white);
}
.bg-red {
	background-color: var(--red);
	color: var(--white);
}
.bg-orange {
	background-color: var(--orange);
	color: var(--white);
}
.bg-olive {
	background-color: var(--olive);
	color: var(--white);
}
.bg-green {
	background-color: var(--green);
	color: var(--white);
}

.hide {
	display: none;
}
/*----------------- 颜色 --------------------- */
.primary-color {
	color: rgb(126, 168, 246) !important;
}

.primary-background {
	background: rgb(126, 168, 246) !important;
}

.color-black {
	color: #000 !important;
}

.color-black-deep {
	color: #333 !important;
}

.color-black-middle {
	color: #666 !important;
}

.color-black-light {
	color: #999 !important;
}

.color-black-lighter {
	color: #ccc !important;
}

.color-blue {
	color: #7ea8f6 !important;
}

.unfinish-color {
	color: #e75b58 !important;
}
.finish-color {
	color: #3dbf7d !important;
}
.unfinish-header {
	color: rgb(229, 77, 66) !important;
	background-color: rgb(250, 219, 217) !important;
}
.finish-header {
	color: rgb(57, 181, 74) !important;
	background-color: rgb(215, 240, 219) !important;
}
.transparent {
	background: transparent !important;
}
/*------------------------ 字号 ------------------------------*/
.generateFontSize(@n, @i: 10) when (@i =< @n) {
	.fontSize@{i} {
		font-size: @i + 0rpx !important;
	}
	.generateFontSize(@n, (@i+1));
}
.generateFontSize(20);
/*------------------------ 圆角 ------------------------------*/
.generateRadius(@n, @i: 0) when (@i =< @n) {
	.border-radius@{i} {
		border-radius: @i + 0rpx !important;
	}
	.generateRadius(@n, (@i+1));
}
.generateRadius(30);
/*------------------------ 边距 ------------------------------*/
.generateBoxSizing(@n, @i: 0) when (@i =< @n) {
	.margin@{i} {
		margin: @i + 0rpx !important;
	}
	.marginTop@{i} {
		margin-top: @i + 0rpx !important;
	}
	.marginBottom@{i} {
		margin-bottom: @i + 0rpx !important;
	}
	.marginLeft@{i} {
		margin-left: @i + 0rpx !important;
	}
	.marginRight@{i} {
		margin-right: @i + 0rpx !important;
	}
	.padding@{i} {
		padding: @i + 0rpx !important;
	}
	.paddingTop@{i} {
		padding-top: @i + 0rpx !important;
	}
	.paddingBottom@{i} {
		padding-bottom: @i + 0rpx !important;
	}
	.paddingLeft@{i} {
		padding-left: @i + 0rpx !important;
	}
	.paddingRight@{i} {
		padding-right: @i + 0rpx !important;
	}
	.generateBoxSizing(@n, (@i+1));
}
.generateBoxSizing(50);
.widthAuto {
	width: auto !important;
}
/*------------------------ 文本位置 ------------------------------*/
.text-left {
	text-align: left !important;
}

.text-right {
	text-align: right !important;
}

/*------------------------ 覆盖样式 ------------------------------*/
.uni-toast .uni-toast {
	font-size: 24rpx;
	background: rgba(17, 17, 17, 0.5);
}
.uni-page-head-ft {
	padding: 0 24rpx;

	.uni-page-head-btn {
		margin-right: 20rpx;

		&:first-child {
			margin-right: 0;
		}
	}
}
.uni-input {
	box-sizing: border-box;
	display: inline-block;
}
.uni-textarea {
	height: 240rpx;
}
i.uni-btn-icon {
	vertical-align: middle;
}

.uni-page-head {
	&:after {
		content: '';
		position: absolute;
		bottom: 0;
		height: 2rpx;
		left: 0;
		right: 0;
		background: #ccc;
		transform: scaleY(0.5);
	}
}

.ray-cell__group {
	padding: 0 30rpx;
	max-width: 100%;
}

.ray-cell {
	padding: 24rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	position: relative;
	margin: 0 -30rpx;

	.ray-cell__title, .ray-cell__label {
		font-size: 28rpx;
		font-weight: 400;
		color: rgb(50, 50, 51);
		flex-shrink: 0;
		min-width: 120rpx;
	}

	.ray-cell__value,
	.ray-cell__text {
		flex-grow: 1;
		text-align: right;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);

		input {
			color: #333;
			font-size: 28rpx;
			padding-left: 20rpx;
		}
	}

	.ray-cell__icon {
		flex-shrink: 0;
		display: block;
		width: 32rpx;
		height: 32rpx;
		margin-right: -4rpx;

		&.ray-cell__arrow {
			position: relative;
			transition: all 0.2s;

			&:after {
				content: '';
				position: absolute;
				border-top: solid 4rpx rgba(150, 151, 153, 0.6);
				border-right: solid 4rpx rgba(150, 151, 153, 0.6);
				width: 16rpx;
				height: 16rpx;
				transform: rotate(45deg);
				top: 6rpx;
				border-radius: 4rpx;
			}

			&.ray-cell__arrow--up {
				transform: rotate(-90deg);
			}
			&.ray-cell__arrow--down {
				transform: rotate(90deg);
			}
		}

		&.ray-cell__button {
			width: auto;
		}
	}

	&:after {
		content: '';
		position: absolute;
		bottom: 0;
		height: 2rpx;
		left: 30rpx;
		right: 0;
		background: #e1e1e1;
		transform: scaleY(0.5);
	}

	&:last-child {
		&:after {
			height: 0;
		}
	}

	&.ray-cell-no-line {
		&:after {
			height: 0;
		}
	}
}

// .ray-panel {
// 	width: 100%;
// 	background-color: #fff;
// 	.ray-panel__header {
// 		padding: 30rpx;
// 		align-items: center;
// 		font-size: 28rpx;
// 		font-weight: 500;
// 		color: rgba(69, 90, 100, 0.6);
// 	}

// 	.ray-panel__content {
// 		padding: 0 30rpx 30rpx 30rpx;
// 	}
// 	&.ray-card {
// 		width: auto;
// 		margin: 10rpx 20rpx 30rpx 20rpx;
// 		background: transparent;
// 		.ray-panel__header {
// 			padding: 24rpx 20rpx 16rpx 20rpx;
// 		}
// 		.ray-panel__content {
// 			padding: 0;
// 			border-radius: 12rpx;
// 			overflow: hidden;
// 			background: #fff;

// 			// 以下是可能会出现的内嵌样式
// 		}
// 	}
// 	&:last-child {
// 		margin-bottom: 0;
// 	}
// }

.list-panel {
	.ray-panel {
		border-radius: 20rpx;
		overflow: hidden;
	}
}

.item-cell {
	align-items: flex-start;
	padding: 20rpx 30rpx;
	display: flex;
	line-height: 1.5;

	.item-cell__title {
		width: 160rpx;
		font-size: 28rpx;
		color: rgb(50, 50, 51);
		flex-shrink: 0;
	}

	.item-cell__value {
		font-size: 28rpx;
		color: rgb(50, 50, 51);
		flex-grow: 1;

		input {
			color: rgb(50, 50, 51);
		}
	}
}

.ray-cell__group {
	.item-cell {
		margin: 0 -30rpx;
	}
}
.ray-label-group {
	display: flex;
	flex-wrap: wrap;
	font-size: 28rpx;
	.ray-label {
		border: solid 2rpx #7ea8f6;
		color: #7ea8f6;
		border-radius: 8rpx;
		padding: 16rpx 24rpx;
		margin-right: 24rpx;
		margin-bottom: 24rpx;
		&.active {
			background: #7ea8f6;
			color: #fff;
		}
	}
}
.button-list {
	display: flex;
	align-items: center;
	justify-content: space-between;

	&.fixed {
		position: fixed;
		z-index: 100;
		&.bottom {
			width: 100%;
			bottom: 0;
		}

		&.top {
			width: 100%;
			top: 0;
		}
	}
	.button {
		border-radius: 0;
		font-size: 32rpx;
		line-height: 1;
		padding: 32rpx;
		flex-grow: 1;
		flex-shrink: 0;

		&:first-child {
			&:after {
				border-left: none;
			}
		}
		&[type='primary'] {
			background: rgb(126, 168, 246);
			&:after {
				color: #fff;
				border-color: rgb(126, 168, 246);
			}
		}

		&[disabled] {
			color: hsla(0, 0%, 100%, 0.8);
			background: #e0e0e0 !important;
			&:after {
				border-color: rgba(199, 199, 199, 0.5);
			}
		}
		&:after {
			border-radius: 0;
		}
	}
}

.float-buttons {
	position: fixed;
	bottom: 40rpx;
	right: 40rpx;
	border-radius: 40rpx;
	background-color: #7ea8f6;
	border: solid 2rpx #79a8ff;
	box-shadow: 0 0 10rpx 4rpx rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	overflow: hidden;
	.iconfont {
		display: inline-block;
		padding: 16rpx 20rpx;
		text-align: center;
		vertical-align: middle;
		color: #fff;
		&:active {
			background-color: #ececec;
			color: #79a8ff;
		}
	}
	.split {
		display: inline-block;
		width: 2rpx;
		height: 32rpx;
		background-color: #d4d4d4;
		margin: 8rpx;
	}
}

@media screen and (min-width: 828rpx) {
	.float-buttons {
		border-radius: 48rpx;
		.iconfont {
			padding: 30rpx;
		}
	}
}

.custom-nav-bar {
	.common {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		&.left {
			justify-content: flex-start;
			padding-left: 10rpx;
		}
		&.right {
			justify-content: flex-end;
			/* #ifdef MP-WEIXIN */
			&.weixin {
				padding-right: 160rpx;
			}
			/* #endif */
		}

		.button {
			line-height: 1;
		}
	}
}
.ray-list {
	display: flex;
	flex-direction: column;

	.ray-list__header {
		background-color: #fff;
		width: 100%;
		flex-shrink: 0;
		&.fixed {
			position: fixed;
			z-index: 10;
		}
	}
	.ray-list__body {
		width: 100%;
		flex-grow: 1;
		margin-top: 160rpx;
	}
	.ray-list__foot {
		width: 100%;
		flex-shrink: 0;
	}
}

.more {
	position: relative;
	padding-right: 20rpx;
	&:after {
		content: '';
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 14rpx;
		height: 24rpx;
		background: url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/arrow-right.png) center center no-repeat;
		background-size: auto 100%;
		background-position: right center;
		/* #ifdef MP-WEIXIN */
		// margin-top: -2rpx;
		/* #endif */
	}
	&.white-more {
		&:after {
			height: 22rpx;
			margin-top: -1rpx;
			background-image: url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/more-white.png);
		}
	}
}

.ray-panel {
	padding: 0 40rpx;
	.ray-header {
		padding: 23rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left {
			font-size: 36rpx;
			font-weight: 400;
			color: rgba(102, 100, 93, 1);
			line-height: 50rpx;
		}
		.right {
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(102, 100, 93, 1);
			line-height: 33rpx;
		}
	}

	.ray-content {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 24rpx;
		.class-item {
			width: 50%;
			padding: 12rpx;
			.item-border {
				background: #fff;
				border-radius: 20rpx;
				overflow: hidden;
				image {
					height: 140rpx;
					width: 100%;
					vertical-align: top;
				}

				.content {
					margin: 20rpx;
					font-size: 28rpx;
					font-weight: 300;
					color: rgba(102, 100, 93, 1);
					line-height: 40rpx;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					min-height: 80rpx;
				}
			}
			&:nth-child(2n) {
				padding-right: 0;
			}
			&:nth-child(2n + 1) {
				padding-left: 0;
			}
		}
	}
}

uni-tabbar .uni-tabbar__icon {
	position: relative;
	display: inline-block;
	margin-top: 10rpx;
	width: 42rpx;
	height: 42rpx;
}
// uni-tabbar .uni-tabbar__label {
// 	line-height: 30rpx;
// 	font-size: 22rpx;
// 	color: #66645D;
// 	margin: 5rpx 0 6rpx 0;
// 	font-family: 'PingFangSC-Regular';
// }

/*每个页面公共css 放app.vue页面的 */
@font-face {
	font-family: 'font_family'; /* project id 1991769 */
	src: url('//at.alicdn.com/t/font_1991769_u8wpg8jfhpq.eot');
	src: url('//at.alicdn.com/t/font_1991769_u8wpg8jfhpq.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1991769_u8wpg8jfhpq.woff2') format('woff2'),
		url('//at.alicdn.com/t/font_1991769_u8wpg8jfhpq.woff') format('woff'), url('//at.alicdn.com/t/font_1991769_u8wpg8jfhpq.ttf') format('truetype'),
		url('//at.alicdn.com/t/font_1991769_u8wpg8jfhpq.svg#iconfont') format('svg');
}

.font_family {
	font-family: 'font_family' !important;
	font-size: 32rpx;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: 0.4rpx;
	-moz-osx-font-smoothing: grayscale;
}
/* 按钮去掉边框 */
button::after {
	border: none;
}
button {
	color: #66645d;
}
.share-pro {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-direction: column;
	z-index: 101;
	line-height: 1;
	box-sizing: border-box;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	.share-pro-mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
	}
	.share-pro-dialog {
		width: 100%;
		overflow: hidden;
		background: #f7f7f7;
		border-radius: 12rpx 12rpx 0rpx 0rpx;
		position: relative;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		.share-cancel {
			padding: 6rpx 0;
			font-size: 30rpx;
			color: #65645d;
			background-color: #fff;
		}
		.share-pro-title {
			font-size: 28rpx;
			text-align: center;
			font-weight: 400;
			color: #66645d;
			line-height: 50rpx;
			padding: 32rpx 0;
		}

		.share-pro-body {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			font-size: 28rpx;
			color: #1c1c1c;
			padding: 20rpx;
			.share-item {
				display: flex;
				width: 50%;
				position: relative;
				padding: 4rpx 0 18rpx 0;
				flex-direction: column;
				justify-content: center;
				top: 20rpx;
				align-items: center;
				outline: none;
				button {
					line-height: 1;
					padding: 0;
					overflow: unset;
					margin: 0;
					outline: none;
				}
				.share-icon {
					text-align: center;
					font-size: 88rpx;
					color: #42ae3c;
				}
				.wechat {
					width: 98rpx;
					height: 98rpx;
					background: url(https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/wechat.png) center center no-repeat;
					background-size: 100%;
				}
				.text {
					font-size: 24rpx;
					color: #8a8c8d;
					margin-bottom: 16rpx;
					margin-top: 20rpx;
				}

				&:nth-child(1) {
					&::after {
						content: '';
						position: absolute;
						right: 0;
						top: 20rpx;
						bottom: 52rpx;
						width: 2rpx;
						transform: scaleX(0.5);
						background-color: rgba(102, 100, 93, 0.15);
					}
				}
				&:nth-child(2) {
					.share-icon {
						color: #ff5f33;
					}
				}
			}
		}
	}
}

iframe {
	height: calc(100% - 80rpx) !important;
}
